<template>
  <div>
    <el-card class="sur-card">
      <div class="sur-card-title" slot="header">
        <span>文章管理</span>
        <el-button type="text" @click="$router.push('/shop/article_edit')"
          >添加文章</el-button
        >
      </div>
      <el-table :data="articleList" border>
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column label="文章分类" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 'notice'">公告</span>
            <span v-if="scope.row.type === 'question'">常见问题</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" align="center">
          <template slot-scope="scope"> 《{{ scope.row.title }}》 </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" align="center">
        </el-table-column>
        <el-table-column label="创建时间" prop="sort" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | dateFormatMin }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button-group>
              <el-button type="primary" @click="onEdit(scope.row)"
                >编辑</el-button
              >
              <el-button type="danger" @click="onDelete(scope.row)"
                >删除</el-button
              >
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
          class="page-section"
          background
          @current-change="onPaging"
          :page-size="pageVo.size"
          @size-change="handleSizeChange"
          :page-sizes="[20, 50, 100, 200]"
          layout="total,sizes,prev, pager, next"
          :total="pageVo.total"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getItemByPage } from "@/api/admin-api/ItemApi";
import { deleteArticle, getArticleList } from "@/api/admin-api/ArticleApi";

export default {
  name: "ArticleList",
  data() {
    return {
      editArticleVisible: false,
      articleList: [],
      articleModel: {
        title: "",
        sort: 1,
        type: "question",
        content: ""
      },
      loadingTable: false,
      pageVo: {
        current: 1,
        size: 20,
        total: 0, //总数量
        pages: 0, //总页数
        orders: [{ column: 'create_time' }] //排序字段
      }
    };
  },
  methods: {
    onPaging(currentPage) {
      // 页码改变
      this.pageVo.current = currentPage;
      this.loadArticles();
    },
    handleSizeChange(val) {
      //页大小改变
      this.pageVo.size = val;
      this.loadArticles();
    },
    onEdit(row) {
      this.$router.push("/shop/article_edit?id=" + row.id);
    },
    onDelete(row) {
      this.$confirm("确定要删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        deleteArticle(row.id).then(() => {
          this.$message.success("操作成功");
          this.loadArticles();
        });
      });
    },
    loadArticles() {
      getArticleList(this.pageVo)
        .then(data => {
          this.articleList = data.records;
          this.pageVo.current = data.current;
          this.pageVo.pages = data.pages;
          this.pageVo.total = Number(data.total);
          this.loadingTable = false;
        })
        .catch(() => {
          this.loadingTable = false;
        });
    }
  },
  mounted() {
    this.loadArticles();
  }
};
</script>

<style scoped></style>
